<template>
  <div class="departmentSet">
    <el-row class="btnbox">
      <el-button type="warning" class="btn">所有部门</el-button>
      <el-button type="info" class="adddep" @click="open">新增部门</el-button>
    </el-row>
    <List
      :linklist="linklist"
      :tableData="tableData"
      :btnList="btnList"
      :titleList="titleList"
    ></List>
  </div>
</template>

<script>
import List from "../../components/StaffComponent/List.vue";
import {
  departmentSetAxios,
  addDepAxios,
} from "../../http/apis/staffApi/index";

export default {
  name: "DepartmentSet",
  components: {
    List,
  },
  data() {
    return {
      dept_id: "",
      dept_name: "",
      value: "",
      // 表格标题行
      linklist: [
        {
          id: "0",
          name: "部门名称",
          isRouter: true,
          url: "/information/alterdepartment",
        },
      ],
      // 管理 （修改&删除）
      btnList: [
        {
          id: "1",
          name: "修改",
          type: "部门设置",
        },
        {
          id: "2",
          name: "删除",
          type: "部门设置",
        },
      ],
      // 字段名称
      titleList: ["dept_name"],
      // 表格数据
      tableData: [
        {
          dept_name: "人事部",
        },
      ],
    };
  },
  created() {
    this.dep();
  },
  methods: {
    // 新增部门按钮
    open() {
      this.$prompt("新增部门", "新增部门", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.dept_name = value;
          this.addStaff();
          this.$message({
            type: "success",
            message: "你新增的部门是 " + value,
          });
          window.location.reload();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 获取部门数据
    dep() {
      this.tableData = [];
      departmentSetAxios()
        .then((res) => {
          console.log("部门设置请求成功：", res.data.data);
          this.value = res.data.data[0].dept_name;
          console.log("名字", this.value);
          //将后端数据放入新数组
          let deptArr = res.data.data;

          //将新数组deptArr 赋值给 tableData
          this.tableData = deptArr;
        })
        .catch((err) => {
          console.log("部门请求失败：", err);
        });
    },
    //新增部门
    addStaff() {
      addDepAxios(this.dept_name)
        .then((res) => {
          console.log("新增部门请求成功：", res.data);
        })
        .catch((err) => {
          console.log("新增部门请求失败：", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.btnbox {
  display: flex;
  justify-content: center;
}

.btn {
  background: #e46f60;
  width: 120px;
  height: 38px;
}

.adddep {
  background: #499c84;
  width: 120px;
  height: 38px;
}
</style>